<template>
<div class="wrap" v-if='img_list && img_list.length'>
<swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide class="swiper_img" v-for="item of img_list" :key="item.id"><img :src="item.imgurl" alt=""></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>
<script>

export default {
    name:"HomeSwiper",
    data:function(){
        return{
           swiperOption:{
              pagination:'.swiper-pagination',
              autoplay:3000,
              loop:true,
              autoplayDisableOnInteraction: false,
              stopOnLastSlide: false,
           },
           img_list:[
             {id:'001',imgurl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/b421363bbbb9184deacb4247eeea7485.jpg_750x200_12b42643.jpg"},
             {id:'002',imgurl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/d7bbc21db442366a882e04ddc984669a.jpg_750x200_85e640d9.jpg"},
             {id:'003',imgurl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg"},
             {id:'004',imgurl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20197/1f69b3ab28f9962158c798a8a3f5b4b3.jpg_750x200_fb4bf7c4.jpg"},
             {id:'005',imgurl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20197/2fe27391384163d36658801c62fca9ad.jpg_750x200_3d22cd9e.jpg"},
             {id:'006',imgurl:"http://img1.qunarzz.com/piao/fusion/1706/b8/a8e8ff02b094c802.jpg_750x200_ddaec8e5.jpg"},
             {id:'007',imgurl:"http://img1.qunarzz.com/piao/fusion/1706/b9/6b91b49794f46402.jpg_750x200_d7f254e2.jpg"}
           ]
        }
    },
    // computed: {
    //   swiper() {
    //     return this.$refs.mySwiper.swiper;
    //   }
    // },
    //  mounted() {
    //   // current swiper instance
    //   // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    //   console.log('this is current swiper instance object', this.swiper)
    //   this.swiper.slideTo(0, 1000, false)
    // }
}
</script>

<style lang="stylus" scoped>
 .wrap >>> .swiper-pagination-bullet-active{
   background :white !important;
 }
 .wrap{
      width:100%;
      height :0;
      padding-bottom:31.25%;
      overflow hidden;
   img{
      width:100%;
      height 100%;
   }
 }
   
</style>
